<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="850px"
      @closed="closed"
    >
    <div style="padding: 20px;">
      <treeselect v-model="value"
      :multiple="true"
      :flat="true"
      noOptionsText="无数据."
      noResultsText="无数据."
      noChildrenText="无数据."
      :normalizer="normalizer"
      placeholder="请选择..."
      :options="options" />
    </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>

  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  import {
    saveRole,
    saveRoleUsers,
    getMenuIdsByRoleId,
    saveRoleMenus
  } from '@/api/system/role'

  import {
    getMenuOptionsTree
  } from '@/api/system/menu'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'RoleDataDialog',
    components: {
      Treeselect
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.roleData= value.data
            this.title = '当前角色:'+value.data.name
          } else {
            this.roleData={}
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.load();
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        roleData: {
        },
        value: null,
        oldValue:null,
        options: [],
      }
    },
    created() {
      this.load();
    },
    methods:{
      load(){
        this.loading=true
        getMenuOptionsTree().then(response => {
          this.loading=false
          if(isOk(response)){
            this.options=response.result;
            this.getMenuIdsByRoleId();
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      getMenuIdsByRoleId(){
        this.loading=true
        getMenuIdsByRoleId({
          roleId:this.roleData.id
        }).then(response => {
          this.loading=false
          if(isOk(response)){
            this.value=response.result;
            this.oldValue=response.result;
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      normalizer(node){
          //去掉children=[]的children属性
          if(node.children && !node.children.length){
              delete node.children;
          }
          return {
              id: node.id,
              label:node.name,
              children:node.children
          }
      },
      change(array1,array2) {
          return array1.length==array2.length && array1.every(function(v,i) { return v === array2[i]});
      },
      submitForm(){
        if(!this.change(this.value,this.oldValue)){
            this.loading=true
            saveRoleMenus({
              roleId: this.roleData.id,
              menuIds: this.value!=null && this.value!='' && this.value!=undefined ?  this.value.join():''
            }).then(response => {
              if(200==response.code){
                this.$message({
                  type: 'success',
                  message: response.message
                })
              }else{
                this.$message({
                  type: 'error',
                  message: response.message
                })
              }
              this.loading=false
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
              this.$emit('closed', false)
            })
        }else{
        }
      },
      closed: function() {
        if(!this.change(this.value,this.oldValue)){
          this.$confirm('角色权限有变动，需要保持吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this. submitForm();
          }).catch(() => {
            this.$emit('closed', false)
          })
        }else{
          this.$emit('closed', false)
        }
      },
    }
  }

</script>

<style>
</style>
